<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    @font-face {
      font-family: "clockIcon";
      src: url(../font/clockicons.woff2);
    }

    .clock {
      text-align: center;
      background-color: grey;
      height: 160px;
    }

    .clock .nowtime {
      height: 32px;
      line-height: 32px;
    }

    .clock .time {
      line-height: 45px;
      height: 45px;
      font-size: 32px;
      /* font-family: "clockIcon"; */
    }

    .clock .date {
      line-height: 45px;
      height: 45px;
      font-size: 24px;
    }

    .clock .week {
      line-height: 45px;
      height: 45px;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="nowtime">现在时间</div>
    <div class="time"></div>
    <div class="date"></div>
    <div class="week"></div>

  </div>
</body>
<script>
  var timeDiv = document.querySelector('.time');
  var dateDiv = document.querySelector('.date');
  var weekDiv = document.querySelector('.week');

  // console.log(dateDiv);

  nowTime();
  setInterval(function () {
    nowTime();
  }, 1000)

  function nowTime() {
    var now = new Date();
    var year = now.getUTCFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var week = now.getDay();
    var lastweek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    timeDiv.innerHTML = `${beauty(hour)}:${beauty(minute)}:${beauty(second)}`;
    dateDiv.innerHTML = `${year}年${month}月${day}日`
    weekDiv.innerHTML = `${lastweek[week]}`
  }

  function beauty(num) {
    return num < 10 ? "0" + num : num;
  }
</script>

</html>